<!doctype html>
<html>
<head>
<style>
    * {
        margin: 0px;
        padding: 0px;
    }
    html {
        overflow: hidden;
        background: #80A0B0;
        height: 100%;
        width: 100%;
    }
    body {
        border-radius: 3px;
        border: 1px solid #806666;
        box-sizing:border-box;
        width: 100%;
        height: 100%;
        -webkit-user-select: none;
    }

    .main{
        width: 100%;
        height: 100%;
        background:#f5f5f5;
        border-radius:3px;
        box-sizing:border-box;
    }
    #win-title{
        cursor: pointer;
        height:20px;
        border-top-left-radius:3px;
        border-top-right-radius:3px;
        /*background: red;*/
    }
    #win-title #win-title-text{
        font-family:"微软雅黑";
        position: absolute;
        top: 2px;
        left: 5px;
        font-size:14px;
        color:#333333;
    }
    #win-title .tools{
        position: absolute;
        right: 5px;
        top: 3px;
    }
    #win-title .tools .win-min,#win-title .tools .win-close,#win-title .tools .win-skin{
        display: inline-block;
        width: 16px;
        height: 16px;
        background: red;
    }
    #win-title .tools .win-skin{
        background: url("imgs/icons.png") no-repeat -32px 0px;
    }
    #win-title .tools .win-skin:hover{
        background: url("imgs/icons.png") no-repeat -32px -16px;
    }
    #win-title .tools .win-min{
        background: url("imgs/icons.png") no-repeat;
    }
    #win-title .tools .win-close{
        background: url("imgs/icons.png") no-repeat -16px 0px;
    }
    #win-title .tools .win-min:hover{
        background: url("imgs/icons.png") no-repeat 0px -16px;
    }
    #win-title .tools .win-close:hover{
        background: url("imgs/icons.png") no-repeat -16px -16px;
    }
</style>

</head>
<body>
<div class="main">
    <div id="win-title">
        <span class="win-title-text">OSChina</span>
        <span class="tools">
            <a class="win-skin" href="javascript:void(0)" onclick="skinItem()"></a>
            <a class="win-min" href="javascript:void(0)" onclick="windowMin()"></a>
            <a class="win-close" href="javascript:void(0)" onclick="cef.CefClose()"></a>
        </span>
    </div>
    <div class="skin-item">
    </div>
    <div class="win-content">
        <iframe id="main-iframe" src="" frameborder="no"></iframe>
    </div>
</div>
<script>
    var Drag = {
        mouseDown:function(e){
            cef.TitleLeftDown()
        },
        mouseUp:function(e){
            cef.TitleLeftUp()
        },
        mouseMove:function(e){
            cef.TitleMouseMove()
        },
        init:function(){
            win_title = document.getElementById("win-title");
            win_title.onmousedown = Drag.mouseDown;
            win_title.onmouseup = Drag.mouseUp;
            win_title.onmousemove = Drag.mouseMove;
        }
    };
    Drag.init();
</script>
</body>
</html>